<template>
  <div class="wuyu">
    <div
      class="popus"
      ref="popu"
      v-if="value"
      @touchstart.prevent="handlerTouchstart"
      @touchmove.prevent="handlerTouchmove"
      @touchend.prevent="handlerTouchend"
      :style="{ transform: `translate3D(0,${pp}px,0)`,transition:`${donghya}s`}"
    >
      <div class="box">我服了呀宝宝{{pp}}</div>
      <div>{{dd}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "pupus",
  props: {
    value: {
      type: Boolean,
    },
    active: {
      type: Number,
    },
  },
  //  components: {
  //     masktos
  //   },
  data: function () {
    return {
      offset: 0,
      pp: 0,
      donghya: 0.1,
      dd: 0,
    };
  },
  watch: {
    value(val) {
      this.pp = 0;
    },
  },
  methods: {
    handlerTouchstart(e) {
      this.offset = e.touches[0].clientY;
      this.dd = this.$refs.popu.offsetHeight / 2;

      //  console.log(e,'开始移动了')
    },
    handlerTouchmove(e) {
      this.donghya = 0;
      // this.offset =
      // console.log(e.touches[0].clientY-this.offset)
      this.pp = -(0 - (e.touches[0].clientY - this.offset));
      if (this.pp < 0) {
        this.pp = 0;
      } else {
      }
      // console.log(this.pp,'移动了')
    },

    handlerTouchend(e) {
      // 获取popus高度
      this.donghya = 0.6;
      console.log(this.pp, "移动了");
      if (this.pp < this.$refs.popu.offsetHeight / 2) {
        this.pp = 0;
        // console.log('我是0')
      } else {
        this.pp = this.$refs.popu.offsetHeight;
        // console.log('我是1')
        console.log(this.pp, "哈哈");
        setTimeout(() => {
          this.$emit("oo", false);
        }, 600);
        // this.value = false
      }
      //   console.log('结束了')
    },
  },
};
</script>
<style lang="less" scoped>
.popus {
  position: absolute;
  z-index: 999999;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 800px;
  width: 100%;
  border-radius: 20px 20px 0px 0px;
  background: #cccccc;
  animation: myfirst 0.6s;
}
@keyframes myfirst {
  from {
    transform: translate3d(0px, 100%, 0);
  }
  to {
    transform: translate3d(0px, 0, 0);
  }
}
.box {
  width: 200px;
  height: 200px;
  background: aquamarine;
}
</style>